﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/weixin/css/base.css">
<link rel="stylesheet" type="text/css" href="static/weixin/css/page.css">
<script type="text/javascript" src="static/weixin/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="static/weixin/js/jquery.mobile.js"></script>
<script type="text/javascript" src="static/weixin/js/jquery.media.js"></script>
<script type="text/javascript" src="static/weixin/js/jquery.data.js"></script>
<title>会员中心</title>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
	/* alert(location.href.split('#')[0]);
	wx.config({
	    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	    appId: '${pd.appid}', // 必填，公众号的唯一标识
	    timestamp: '${pd.timestamp}', // 必填，生成签名的时间戳
	    nonceStr: '${pd.nonceStr}', // 必填，生成签名的随机串
	    signature: '${pd.signature}',// 必填，签名，见附录1
	    jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	wx.ready(function(){
    	// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
		getLoca();
	});
	wx.error(function(res){
   		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
		
	});
	wx.checkJsApi({
	    jsApiList: ['getLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
	    success: function(res) {
	    // 以键值对的形式返回，可用的api值true，不可用为false
	    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
	    }
	}); */
	function getLoca(){
	wx.getLocation({
		type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
		success: function (res) {
		var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
		var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
		var speed = res.speed; // 速度，以米/每秒计
		var accuracy = res.accuracy; // 位置精度
		alert(latitude);
		}
	});
	}
	
</script>
</head>
    <!--banner end-->
	<!--
	${pd.openid } <br/>
	${pd.nickname } <br/>
	${pd.sex } <br/>
	${pd.province } <br/>
	${pd.city } <br/>
	${pd.country } <br/>
	<img alt="头像" src="${pd.headimgurl }">
	 <br/>
	${pd.privilege } <br/>
	${pd.unionid } <br/>
	-->
 
<!--footer end-->
<body id="channelpg" class="page">
<style>
.div-inline{
	display:inline;
	
	}
	.div-card{
		font-size:12px;
		font-family:"微软雅黑";
		position:relative;
	}
</style>

<!--progressDialog start-->
<div id="progressDialog" class="popdialog" style="display: none;"><div class="popdialog-inner"><div class="dialog"></div></div></div>
<!--progressDialog end-->
<!--section start-->

<!--section start-->
<section>
<div class="section-inner">
    <!--banner start-->
    <div id="cpgBanner" class="banner" style="height:200px; padding: 10px 20px; width: calc(100% - 40px)">
        <!-- 卡页面 start-->
        <div class="div-card" style="width: calc(100% - 20px);height:calc(100% - 20px); background:#ffff66;border-radius:10px; padding:10px;">
        <div>
        	<div class="div-inline" style="float:left; width: 50px; height:50px; border-radius:20px;">
            	<img  style=" width: 50px; height:50px; border-radius:25px;" src="${pd.headimgurl }"/>
            </div>
        	<div class="div-inline" style="float:left;margin-left:20px;">
            	<div>${pd.name == '' ? pd.nickname : pd.name }</div>
                <div>vip${pd.jb }</div>
            </div>
            <div class="div-inline" style="float:left; width: 40px; height:40px; float:right ">
            	<img  style=" width: 40px; height:40px;" src="static/weixin/erm.png"/>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div style="margin-left:20px; margin-top:10px;">有效期|${pd.sxrq }</div>
        <div class="" style="position:absolute;left:30px;bottom:30px; color:#666666; font-size:16px;font-weight:bold ;">VIP NO.${pd.kh }</div>
        </div>
        <!-- 卡页面 end-->
    </div>
    <style>
    .icon-list-head{

		
	}
	.icon-list-head li{
		list-style:none; /* 将默认的列表符号去掉 */
		padding:0; /* 将默认的内边距去掉 */
		margin:0; /* 将默认的外边距去掉 */
		float:left;
		width:33%;
	}
	.icon-list-head li a{
		display:block; /* 将链接设为块级元素 */
		padding:8px 20px; /* 设置内边距 */
		text-decoration:none; /* 去掉下划线 */
		border-right:1px solid  #CCCCCC; /* 在左侧加上分隔线 */
		text-align:center;
	}
	.icon-list-head-p{
		margin-top:10px;
		font-size:16px;
		color:#FF9900;
	}
	.icon-list-body li{
		list-style:none; /* 将默认的列表符号去掉 */
		padding:0; /* 将默认的内边距去掉 */
		margin:0; /* 将默认的外边距去掉 */
		float:left;
		width:32%;
		height: calc(width);
		border:1px solid  #CCCCCC; /* 在左侧加上分隔线 */
	}
	.icon-list-body li a{
		display:block; /* 将链接设为块级元素 */
		padding:8px 20px; /* 设置内边距 */
		text-decoration:none; /* 去掉下划线 */
		border-right:1px solid  #CCCCCC; /* 在左侧加上分隔线 */
		text-align:center;
	}
	.icon-list-foot li{
		list-style:none; /* 将默认的列表符号去掉 */
		padding:0; /* 将默认的内边距去掉 */
		margin:0; /* 将默认的外边距去掉 */
		float:left;
		width:24%;
		height: calc(width);
		border:1px solid  #CCCCCC; /* 在左侧加上分隔线 */
	}
	.icon-list-foot li a{
		display:block; /* 将链接设为块级元素 */
		padding:8px 20px; /* 设置内边距 */
		text-decoration:none; /* 去掉下划线 */
		border-right:1px solid  #CCCCCC; /* 在左侧加上分隔线 */
		text-align:center;
	}
    </style>
    <div style="background:#FFFFFF; font-size:12px; font-family:微软雅黑; padding:10px;">
        <ul class="icon-list-head">
            <li>
            	<a href="./weixin/vip/getIntegralDetails?openid=${pd.openid }"><p>积分</p><p class="icon-list-head-p">${pd.jf }</p></a>
            </li>
            <li>
            	<a><p>余额</p><p class="icon-list-head-p">${pd.ye }</p></a>
            </li>
            <li>
            	<a><p>优惠卷</p><p  class="icon-list-head-p">0</p></a>
            </li>
        </ul>
    </div>
    <!--banner end-->
    <div style="height:10px; background: #EEEEEE;"></div>
    <!--icon start-->
    <div style="background:#FFFFFF; font-size:16px; font-family:微软雅黑; padding:10px;">
        <ul class="icon-list-body">
            <li>
            	<a><p></p><p class="">会员资料</p></a>
            </li>
            <li>
            	<a href="./weixin/vip/getIntegralDetails?openid=${pd.openid }"><p></p><p class="">积分查询</p></a>
            </li>
            <li>
            	<a><p></p><p  class="">附近门店</p></a>
            </li>
            <li>
            	<a href="./weixin/vip/getOrders?openid=${pd.openid }"><p></p><p  class="">消费查询</p></a>
            </li>
            <li>
            	<a><p></p><p  class="">账户充值</p></a>
            </li>
            <li>
            	<a><p></p><p  class="">积分说明</p></a>
            </li>
        </ul>
    </div>
    <!--icon end--> 
    <div style="height:10px; background: #EEEEEE;"></div>
    <div style="background:#FFFFFF; font-size:20px; font-family:微软雅黑; padding:5px 10px;">
    	活动
    </div>
    <div style="height:5px; background: #EEEEEE;"></div>
    <div style="background:#FFFFFF; font-size:12px; font-family:微软雅黑; padding:10px;">
        <ul class="icon-list-foot">
            <li>
            	<a href="./weixin/vip/goBind"><p></p><p class="">绑定会员卡</p></a>
            </li>
            <li>
            	<a><p></p><p class="">抽奖</p></a>
            </li>
            <li>
            	<a><p></p><p  class="">领券</p></a>
            </li>
            <li>
            	<a><p></p><p  class="">优惠卷</p></a>
            </li>
         </ul>
    </div>
    <div style="height:15px; background: #EEEEEE;"></div>
    <div style="background:#FFFFFF; font-size:20px; font-family:微软雅黑; padding:5px 10px;">
    	联系我们
    </div>
    <div>${pd.json }</div>
</div>
</section>
<!--section end-->

<!--section end-->
  
<!--footer start-->
<footer>
    <div class="footer-inner">
        <p>2015-2017@乐米药箱</p>
    </div>
</footer>
<!--footer end-->


</body></html>